<script setup lang="ts">
const router = useRouter()
const route = useRoute();
const date = ref<string | null>(null)
const selectedProductIds = ref<number[]>([]) // 初始值设置为0表示未选择
const showDescModal = ref(false)
const currentDesc = ref('')

const getProductList = async () => {
  const rawDate = route.query.date
  date.value = Array.isArray(rawDate)
    ? rawDate[0] || null
    : rawDate ?? null
    const { data: productList } = await useFetchGet('/api/Qifu/getProductList')
    // productList.value.data.list.map((item: any) => {
    //   item.img = 'https://admin.kongshengwh.com'+item.img
    // })
    prds.value = productList.value.data.rows
}

// onMounted(() => {
//   getProductList()
// })

watchEffect(() => {
  if (route.query.date) {
    date.value = route.query.date as string
    getProductList()
  }
})

// onMounted(async () => {
//   date.value = route.query.date
//   const { data: productList } = await useFetchGet('http://admin.kqg.com/api/Qifu/getProductList')
//   productList.value.data.list.map((item: any) => {
//     item.img = 'http://admin.kqg.com'+item.img
//   })
//   prds.value = productList.value.data.list
// })
const prds = ref<Array<any>>([])

const toggleProduct = (id: number) => {
  const index = selectedProductIds.value.indexOf(id)
  if (index !== -1) {
    selectedProductIds.value.splice(index, 1)
  } else {
    selectedProductIds.value.push(id)
  }
}

const isSubmit = ref(false)

const msg = ref('')

const openDescModal = (event: MouseEvent, desc: string) => {
  event.stopPropagation()
  currentDesc.value = desc || ''
  showDescModal.value = true
}

const closeModal = () => {
  showDescModal.value = false
  isSubmit.value = false
}

const submitHandle = () => {
  if (!date.value || selectedProductIds.value.length === 0) {
    isSubmit.value = true
    msg.value = !date.value
      ? '请前往上一页选择时间'
      : '请在当前页选择产品'
    return
  }
  router.push({
    path: '/qifu/info',
    query: { date: route.query.date, product: selectedProductIds.value }
  })
}
</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/qifu'" />
    <!-- 自适应背景图 -->
    <img 
    src="/assets/images/qifu/chanpinye.png" 
    alt=""
    class="w-full h-auto object-contain"
    />
    <div class="absolute top-[20%] left-0 right-0 mx-auto grid grid-cols-2 gap-8 w-4/5">
        <div v-for="(product, index) in prds" :key="index" class="relative" @click="toggleProduct(product.id)">
          <div>
            <img 
              :src="`/assets/images/qifu/p-border-${selectedProductIds.includes(product.id) ? 2 : 1}.png`"
              class="w-full h-full object-contain transition-transform duration-300"
              :class="{'scale-105': selectedProductIds.includes(product.id)}"
            />
            <div class="absolute inset-0 aspect-square flex flex-col items-center justify-around">
              <img class="left-0 right-0 mx-auto pt-3 w-[50%] aspect-square" :src="product.img">
              <p class="text-center text-sm text-[#99221b] font-bold line-clamp-2 pt-1">{{ product.desc || '' }}</p>
              <div class="w-full flex justify-around items-center px-2">
                <p class="text-center text-sm text-[#99221b] font-bold line-clamp-2">¥{{ product.price || '' }}</p>
                <p class="text-center text-sm text-[#99221b] font-bold line-clamp-2">{{ product.name || '' }}</p>
                <img 
                  src="/assets/images/qifu/desc-button.png" 
                  alt="" 
                  class="w-8 h-4 z-10" 
                  @click="openDescModal($event, product.detail)"
                >
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class=" absolute animate-scale w-full flex justify-center bottom-[15%] z-1">
        <button class="w-[150px] md:w-[170px] cursor-pointer opacity-90 hover:opacity-100 transition-opacity" 
            :disabled="selectedProductIds.length === 0"
            :class="{ 'opacity-50 cursor-not-allowed': !selectedProductIds }"
            @click="submitHandle">
            <img 
            src="/assets/images/qifu/button.png" 
            alt=""
            />
        </button>
    </div>

    <!-- 描述弹窗 -->
    <div v-if="showDescModal" class="fixed inset-0 flex items-center justify-center z-50 opacity-0 animate-fade-in-up delay-[300ms]">
      <div class="fixed inset-0 bg-black bg-opacity-50" @click="closeModal"></div>
      <div class="relative w-4/5 max-w-md">
        <img src="/assets/images/qifu/desc.png" alt="背景" class="w-full">
        <div class="absolute inset-0 flex flex-col items-center justify-center p-8">
          <p class="text-center text-[#6f6a4a]">{{ currentDesc }}</p>
          <!-- <button @click="closeModal" class="mt-4 px-4 py-2 bg-red-600 text-white rounded-md">关闭</button> -->
        </div>
      </div>
    </div>
    <TipModal
      v-model="isSubmit"
      title="提示"
      :message="msg"
      @close="closeModal"
    />
  </div>
</template>
<style scoped>
@keyframes scaleAnimation {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1); /* 放大到 120% */
  }
  100% {
    transform: scale(0.8); /* 恢复到原始大小 */
  }
}

.animate-scale {
  animation: scaleAnimation 2s ease-in-out infinite; /* 动画时长为 2秒，循环播放 */
}


 /* 自定义淡入上升动画 */
  @keyframes fadeInUp {
      from {
      opacity: 0;
      transform: translateY(20px);
      }
      to {
      opacity: 1;
      transform: translateY(0);
      }
  }

  /* 注册Tailwind动画 */
  .animate-fade-in-up {
      animation: fadeInUp 0.3s ease-out forwards;
  }

  /* 定义延迟类 */
  .delay-\[300ms\]     { animation-delay: 300ms; }
</style>